<template>
  <div class="loading">
    <div v-if="loading" :style="{ width: width, height: height }">
      <div class="transparent" v-if="transparent">
        <img v-show="type === 'success'" src="@/assets/images/loa-success.png" alt="" />
        <img v-show="type === 'error'" src="@/assets/images/loa-error.png" alt="" />
        <img v-show="type === ''" class="loadingImg" src="@/assets/images/loading1.png" alt="" />
        <div class="font">{{
          type === 'success' ? '加载完成' : type === 'error' ? '加载失败' : '加载中'
        }}</div>
      </div>
      <div class="mask" v-if="mask">
        <img v-show="type === 'success'" src="@/assets/images/loa-success2.png" alt="" />
        <img v-show="type === 'error'" src="@/assets/images/loa-error2.png" alt="" />
        <img v-show="type === ''" class="loadingImg" src="@/assets/images/loading2.png" alt="" />
        <div class="font">{{
          type === 'success' ? '加载完成' : type === 'error' ? '加载失败' : '加载中'
        }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '100px',
    },
    height: {
      type: String,
      default: '100px',
    },
    transparent: {
      type: Boolean,
      default: false,
    },
    mask: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: '',
    },
  });
</script>

<style scoped lang="less">
  .loading {
    padding: 50px;
  }

  .transparent {
    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(90deg);
      }

      50% {
        transform: rotate(180deg);
      }

      75% {
        transform: rotate(270deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    img {
      width: 24px;
      height: 24px;
      margin-bottom: 10px;
    }

    .loadingImg {
      animation-name: loading;
      animation-duration: 2000ms;
      animation-timing-function: linear;
      animation-delay: 200ms;
      animation-iteration-count: infinite;
    }

    .font {
      color: rgb(0 82 217 / 100%);
      font-size: 14px;
      line-height: 20px;
    }
  }

  .mask {
    @keyframes loading2 {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: rgb(0 0 0 / 80%);

    img {
      width: 24px;
      height: 24px;
      margin-bottom: 10px;
    }

    .loadingImg {
      animation-name: loading2;
      animation-duration: 1000ms;
      animation-timing-function: linear;
      animation-delay: 200ms;
      animation-iteration-count: infinite;
    }

    .font {
      color: rgb(255 255 255 / 100%);
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
    }
  }
</style>
